<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>权限列表</title>

    <!-- CSS -->
    <link rel="stylesheet" href="../../../static/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" th:href="@{static/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css}"/>
    <link rel="stylesheet" href="../../../static/plugins/layui/css/layui.css" th:href="@{static/plugins/layui/css/layui.css}"/>
</head>
<body>

<div style="padding: 10px">
    <hr class="layui-bg-green" style="margin-left: 20px;">
    <div class="layui-container">
        <div class="layui-row layui-col-space30">
            <!-- 左侧部分 -->
            <div class="layui-col-xs4">
                <div class="layui-form">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 200px">
                            <input class="layui-input" type="text" id="conditionMenuName" autocomplete="off" placeholder="请输入名称" >
                        </div>
                        <button class="layui-btn layui-btn-sm" id="searchBtn"><i class="layui-icon">&#58901;</i>&nbsp;&nbsp;查询</button>
                    </div>
                </div>
                <div style="margin-top:15px;padding-top:10px ;height: 400px;overflow-y: auto;border: 1px solid #e2e2e2;">
                    <ul id="treeBox" style="margin-left: 30px;margin-top: 10px;" class="ztree"></ul>
                </div>
                <input type="hidden" id="roleId"/>
            </div>
            <!-- 右侧部分 -->
            <div class="layui-col-xs8">
                    <button class="layui-btn" id="saveBtn">保存</button>
                    <div style="margin-top:15px;padding-top:10px ;height: 400px;overflow-y: auto;border: 1px solid #e2e2e2;">
                        <ul id="treeBox0" style="margin-left: 30px;margin-top: 10px;" class="ztree"></ul>
                    </div>
            </div>
        </div>
    </div>
</div>

<!-- JS -->
<script type="text/javascript" src="../../../static/plugins/layui/layui.js" th:src="@{static/plugins/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/plugins/zTree_v3/js/jquery-1.4.4.min.js" th:src="@{static/plugins/zTree_v3/js/jquery-2.2.4.min.js}"></script>
<script type="text/javascript" src="../../../static/plugins/zTree_v3/js/jquery.ztree.core.js" th:src="@{static/plugins/zTree_v3/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" src="../../../static/plugins/zTree_v3/js/jquery.ztree.exhide.js" th:src="@{static/plugins/zTree_v3/js/jquery.ztree.exhide.js}"></script>
<script type="text/javascript" src="../../../static/plugins/zTree_v3/js/jquery.ztree.exhide.js" th:src="@{static/plugins/zTree_v3/js/jquery.ztree.excheck.js}"></script>

<script type="text/javascript">

    layui.use(['form','layer','jquery'], function () {
        var layer = layui.layer;
        // var $ = layui.$;//此处不要引入layui内置jquery，否则会与ztree的冲突

        //初始化 tree
        var zTreeObj;
        var setting = {
            async: {
                enable: true,
                url: 'sysRole/getSysRoles',
                dataType: 'json'
            },
            data: {
                key: {
                    name : 'sr01',
                    title: ''
                },
                simpleData : {
                    enable : true,
                    idKey : 'sr02',
                    pIdKey :'sr03'
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {//节点点击事件
                    $('#roleId').val(treeNode.sr02);//角色编号
                    zTreeObj0.checkAllNodes(false);//取消全选
                    //获取该角色拥有的所有菜单id
                    $.ajax({
                        url:'sysRole/getMenuIdsByRoleId',
                        type: 'post',
                        data:{sr02:treeNode.sr02},
                        dataType:'text',//服务器返回的数据类型。
                        success: function(data) {
                            //回显
                            // var ztreeIds = '201810281854529554';
                            var ztreeIds = data.toString();
                            if(ztreeIds.trim()!="") {
                                var ztreeId = ztreeIds.split(",");
                                for (var j = 0; j < ztreeId.length; j++) {
                                    var node = zTreeObj0.getNodeByParam("sm02", ztreeId[j]);
                                    var parent = node.getParentNode();
                                    if (!parent.open) {
                                        zTreeObj0.expandNode(parent, true, true);
                                    }
                                    zTreeObj0.checkNode(node, true, true);
                                }
                            }
                        },
                        error:function(response){
                        }
                    });
                },
                onAsyncSuccess: function (event, treeId, treeNode, msg) {
                    var zTree = $.fn.zTree.getZTreeObj(treeId);
                    zTree.expandAll(true);//展开所有节点
                    // zTree.expandNode(zTree.getNodes()[0], true, false, false);//展开第一级节点
                }
            }
        };
        //加载树
        var zNodes = [];
        $(document).ready(function () {
            zTreeObj = $.fn.zTree.init($("#treeBox"), setting, zNodes);
        });

        //初始化 tree
        var zTreeObj0;
        var setting0 = {
            check: {
                enable: true,
                chkStyle: "checkbox"   //勾选框类型(checkbox 或 radio）
            },
            async: {
                enable: true,
                url: 'sysMenu/getSysMenus',
                dataType: 'json'
            },
            data: {
                key: {
                    name : 'sm01',
                    title: ''
                },
                simpleData : {
                    enable : true,
                    idKey : 'sm02',
                    pIdKey :'sm03'
                }
            },
            callback: {
                onClick: function (event, treeId, treeNode) {//节点点击事件
                },
                onAsyncSuccess: function (event, treeId, treeNode, msg) {
                    var zTree = $.fn.zTree.getZTreeObj(treeId);
                    zTree.expandAll(true);//展开所有节点
                    // zTree.expandNode(zTree.getNodes()[0], true, false, false);//展开第一级节点
                }
            }
        };
        //加载树
        var zNodes0 = [];
        $(document).ready(function () {
            zTreeObj0 = $.fn.zTree.init($("#treeBox0"), setting0, zNodes0);
        });

        //保存
        $('#saveBtn').click(function () {

            var zTree = $.fn.zTree.getZTreeObj("treeBox0");
            var nodes = zTree.getCheckedNodes(true);
            var menus = [];
            $.each(nodes,function(i,obj){
                if(!obj.isParent){
                    menus.push(obj.sm02);
                }
            });

            if(!$('#roleId').val()){
                layer.msg("请指定一个角色", {icon: 5, time: 1500});
            }else if(menus.toString() === ''){
                layer.msg("请至少指定一个菜单", {icon: 5, time: 1500});
            }else{
                    $.ajax({
                        url: 'sysRole/addSysRoleMenu',
                        type: 'post',
                        data: {
                            roleId:$('#roleId').val(),
                            menus:menus.toString()
                        },
                        dataType: 'json',
                        success: function (data) {
                            if(data.code === 0){
                                layer.msg("保存成功", {icon: 1, time: 1500});
                            }else{
                                layer.msg("保存失败", {icon: 5, time: 1500});
                            }
                        },
                        error: function (e) {
                        }
                    });
            }
        });


        //查询
        $("#searchBtn").click(function(){
            var conditionMenuName = $("#conditionMenuName").val();
            doSearchByTreeName('treeBox', 'sr01', conditionMenuName);
        });

    });

    /* 按名称匹配树 */
    var nodeList = [];
    function doSearchByTreeName(treeId, searchKey, searchValue) {
        var treeObj = $.fn.zTree.getZTreeObj(treeId);
        var allNodes = treeObj.transformToArray(treeObj.getNodes());
        treeObj.hideNodes(allNodes);
        nodeList = treeObj.getNodesByParamFuzzy(searchKey, searchValue, null);
        nodeList = treeObj.transformToArray(nodeList);
        for (var n in nodeList) {
            findParent(treeObj, nodeList[n]);
        }
        treeObj.showNodes(nodeList);
        if (searchValue == "") {
            treeObj.expandAll(false);
        }
    }
    // 查找父节点
    function findParent(treeObj, node) {
        treeObj.expandNode(node, true, false, false);
        var pNode = node.getParentNode();
        if (pNode != null) {
            nodeList.push(pNode);
            findParent(treeObj, pNode);
        }
    }

</script>
</body>
</html>